<template>

  <div>

    <el-container>
      <el-header>

        <el-row justify="start">
          <el-col :span="4">
            <div>
              <el-input
                  placeholder="请输入内容"
                  v-model="search"
                  clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-button @click="refresh">刷新</el-button>
              <el-button @click="add">新增数据库配置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>

        <el-row justify="start">
          <el-col :span="24">
            <div class="">
              <el-table
                  :data="this.tableData"
                  style="width: 100%">
                <el-table-column
                    prop="dbTypeCode"
                    label="数据库类型">
                </el-table-column>

                <el-table-column
                    fixed
                    prop="datasourceName"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="driverClassName"
                    label="驱动">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户名">
                </el-table-column>
                <el-table-column
                    prop="database"
                    label="数据库">
                </el-table-column>
                <el-table-column
                    prop="url"
                    label="地址">
                </el-table-column>
                <el-table-column
                    prop="disableFlag"
                    label="启停状态"
                >
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.disableFlag === '0' ? '启用' : '停用'"
                        disable-transitions
                    >{{ scope.row.disableFlag == '0' ? '启用' : '停用' }}
                    </el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="350">
                  <template #default="scope">
                    <el-button @click="handleClick(scope.row)" type="default" size="small">查看</el-button>
                    <el-button @click="edit(scope.row)" type="default" size="small">编辑</el-button>
                    <el-button @click="setStatusFlag(scope.row)" type="default" size="small">
                      {{ scope.row.disableFlag == '0' ? '停用' : '启用' }}
                    </el-button>
                    <el-button type="default" size="small" @click="sqlRunner(scope.row)">sql</el-button>
                    <el-button type="default" size="small" @click="testConnection(scope.row)">测试连接</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-dialog v-model="dsDiag.visible" width="300px">
        <el-form :model="dsDiag">
          <el-form-item label="数据库编码">
            <el-input v-model="dsDiag.datasourceCode" :disabled="this.dsDiag.id!=null" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据库名称">
            <el-input v-model="dsDiag.datasourceName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据库类型">
            <el-select v-model="dsDiag.dbTypeCode" @change="this.change" class="m-2" placeholder="Select"
                       size="large">
              <el-option
                  v-for="item in this.dbList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="驱动">
            <el-select v-model="dsDiag.driverClassName" class="m-2" placeholder="Select"
                       size="large">
              <el-option
                  v-for="item in this.driverClassList"
                  :key="item"
                  :label="item"
                  :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="dsDiag.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="dsDiag.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="IP">
            <el-input v-model="dsDiag.ip" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input v-model="dsDiag.port" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据库">
            <el-input v-model="dsDiag.database" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="url">
            <el-input v-model="dsDiag.url" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dsDiag.visible = false">取 消</el-button>
          <el-button type="primary" @click="this.save">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>

  </div>

</template>

<script>
import {post} from '../../config/Request.js'
import {ElMessage} from 'element-plus'
import apis from "@/request/apis.js";

export default {
  name: "ProcessDataSourceConfigManager",
  components: {},
  watch: {},
  data() {
    return {
      tableData: [],
      dbList: [],
      driverClassList: [],
      dsDiag: {
        viewFlag: false,
        id: null,
        visible: false,
        ip: '',
        datasourceCode: '',
        datasourceName: '',
        driverClassName: '',
        port: null,
        username: '',
        password: '',
        database: '',
        url: '',
        dbTypeCode: ''
      }
    }
  },
  created() {

  },
  mounted() {
    this.dbTypeList();
    this.refresh();

  },
  methods: {
    handleClick(r) {
      this.dsDiag.viewFlag = true;
      this.dsDiag.visible = true;
      this.dsDiag = r;
    },
    sqlRunner(r) {
      this.$router.push({
        name: "sqlRunner", query: {
          id: r.id
        }
      });
    },
    edit(r) {
      this.dsDiag.viewFlag = false;
      this.dsDiag.visible = true;
      this.dsDiag = r;
    },
    async testConnection(r) {
      var data = await apis.post("/square-lake/process/datasource/test_connection", r);
      // this.$message.error(JSON.stringify(data));
      var type = null;
      if (data.indexOf("正确") != -1) {
        type = 'success';
      }
      ElMessage({
        dangerouslyUseHTMLString: true,
        type: type,
        message: data
      })
    },
    async setStatusFlag(row) {
      await apis.post("/square-lake/process/datasource/set_status_flag", {
        id: row.id, disableFlag:
            row.disableFlag == '1' ? '0' : '1'
      });
      this.refresh();
    },
    change(r) {
      var b = null;
      this.dbList.forEach(v => {
        if (v.id == r) {
          b = v;
        }
      });
      this.driverClassList = b.driverClass;
    },
    refresh() {
      this.queryList();
    },
    add() {
      this.dsDiag.visible = true;

    },
    async save() {
      if (this.dsDiag.viewFlag) {
        this.dsDiag.viewFlag = false;
        this.dsDiag.visible = false;
        return
      }

      await this.getUrl();

      // if (!this.compDiag.compFile) {
      //   this.$message.error('请选择组件包');
      //   return;
      // }
      await apis.post("/square-lake/process/datasource/save", this.dsDiag);

      this.dsDiag = {};
      this.refresh();
    },
    async getUrl() {
      var url = await apis.post("/square-lake/process/datasource/get_url", this.dsDiag);
      this.dsDiag.url = url;
    },
    async dbTypeList() {
      const data = await apis.post("/square-lake/process/datasource/db_type_list", {});
      this.dbList = data;

    },
    async queryList() {
      const data = await apis.post("/square-lake/process/datasource/list", {})
      // console.log(data);
      // this.$set(this, "tableData", data);
      this.tableData = data;
    }
  }
}
</script>

<style scoped>

</style>